
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>

<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"> 
$(function(){
// 移到留言上可以删除,编辑-------------------------------------------
    $('#mian .list .onep').hover(function() {
    $(this).find('a').show();
    $(this).find('.edit_a').show();
    $(this).find('.content').addClass('content1');
}, 
function() {
    $(this).find('a').hide();
    $(this).find('.edit_a').hide();
    $(this).find('.content').removeClass('content1');
});
// 留言方式的切换------------------------------------------------
var c=1;
    $('.close').click(function(event) {
if(c==1){
    $('#right').stop().animate({"top": 800+'px'},2000).parent().parent().find('#bottom_out').stop().animate({"bottom": 0+'px'},3000);
    c=0;
}
else{
    $('#right').stop().animate({"top": 50+'px'},2000).parent().parent().find('#bottom_out').stop().animate({"bottom": -120+'px'},3000);
    c=1;
}});
//var lin = $('#right input[name="username"]');
//lin.val("你不错的！");
//var nickname = $('#right input[name="username"]');
//var content = $('#right textarea');
//$('#right input[name="username"]').eq(2).attr("checked",true);
});

function onUpdate(id){
//alert("你点击了修改元素！"+id);  //测试，当点击a元素时，是否正确触发。
    var URL = "a1get_row_byid.php";
    var URL2 = "a1update_form.php";
//alert(form.action);
    var form =$('#right form');  //取得当前表单元素
        form.prop('action',URL2);  //property
        form.prepend('<input type="hidden" name="id" value="'+id+'"/>');  //append()
        $('#right input[type="submit"] ').val('更新');
        $.get(URL,{sid:id},function(data){  //$==> jQuery.get $_GET 异步请求 Action=  // {sid:id}   // 回调函数
    var data = eval("(" + data + ")");  //将json字符串 转换成json 对象结构     data.status
    if(data.status===1){
// 正确的反返回
    info = data.info;  // info,id=3  info.username=abc   info.sex=m  info.content.fsddd   info.time
        $('input[name="username"]').val(info.username);// 取得昵称输入框元素，修改它的值  val() == >value=info.username
        $('textarea[name="message"]').text(info.content); 
// 男和女的选择
    var sexEle = $('#right input:radio[name="sex"]');
    for(i=0;i<2;i++){
    if(sexEle.eq(i).val()===info.sex){
        sexEle.eq(i).prop('checked',true); // attr()  property
    }}
//头像的选择
    var contentEle = $("#right input:radio[name='imgurl']");
    for(var i=1;i<5;i++){
        str = "images/"+i+".jpg";
    if(str===info.avater){
        contentEle.eq(i-1).prop("checked",true);
    }}}
    else{
        alert("没有符合条件的数据信息");
    }});}
 


</script>

</head>

<body>
<div id="top">
<h1>留言板<?php $name="夜夜"; echo $name; echo "hello"; ?></h1>
</div>
<div id="mian_out">
    <div id="mian">
    <h2>其它人都说了什么</h2>
    <ul class="list">
      	<li class="onep">
<?php require_once 'a1shujuku.php'; $sql = "SELECT * FROM  girl "; $result = $conn->query($sql);?>
<?php $rows = $result->fetch_all(MYSQLI_ASSOC); foreach($rows as $row): ?>
        <li class="onep">
            <p class="pic"><img src="<?php echo $row['touxiang'] ; ?>" alt=""/></p>
            <p class="name"><?php echo $row['name']   ; ?></p>
            <p class="content"><?php echo $row['liuyan']   ; ?></p>
            <!--a class="edit_a" href="javascript" onclick="if(confirm('确定修改吗？')) location.href='#'">修改</a-->
            <a class="edit_a" href="javascript" onclick="onUpdate(<?php echo $row['id'];?>)">修改</a>
            <a class="delete" href="javascript" onclick="if(confirm('确定修改吗？')) location.href='#'">删除</a>
        </li> 
<?php endforeach;?>                       
    </ul>
    </div>
    <div id="right">
    <h2>留下你的脚步吧</h2>
	<form action="a1upadd.php" method="post">
	<p class="one">
	昵称:<input class="name" name="name" type="text" placeholder="你的名字" />
	<input type="radio" name="sex" value="男" checked="checked" />boy
	<input type="radio" name="sex" value="女" />girl
        </p>
	<p><textarea name="liuyan" placeholder="这个人很懒,什么都没有写" ></textarea></p>
	<p class="tow">
            <?php $imgarr = array(1,2,3,4);?>
            <?php foreach ($imgarr as $touxiang ) : ?>
            <input type="radio" name="touxiang" value="images/<?php echo $touxiang; ?>.jpg"/><img src="images/<?php echo $touxiang; ?>.jpg" alt=""/>
            <?php endforeach; ?>
	<!--<input type="radio" name="imgurl" value="images/1.jpg" checked="checked" /><img src=" images/1.jpg" alt="" />
	<input type="radio" name="imgurl" value="images/2.jpg" /><img src=" images/2.jpg" alt="" />
	<input type="radio" name="imgurl" value="images/3.jpg" /><img src=" images/3.jpg" alt="" />
	<input type="radio" name="imgurl" value="images/4.jpg" /><img src=" images/4.jpg" alt="" /-->
	</p>
	<p class="thr"><input class="btn" type="submit" value="提交" /></p>
	</form>
        <div class="close"></div>
    </div>
</div>
<div id="bottom_out">
    <div id="bottom">
        <form action="a1upadd.php" method="post">
	<p class="one">
	    昵称:<input class="name" name="rname" type="text" placeholder="大爷你的名字" /><br/><br/>
	    <input type="radio" name="sex" value="男" checked="checked" /boy
	    <input type="radio" name="sex" value="女" />girl
	</p>
	<p><textarea name="liuyan" placeholder="这个人很懒,什么都没有写" ></textarea></p>
	<p class="tow">
	    <input type="radio" name="touxiang" value="images/1.jpg" checked="checked" /><img src=" images/1.jpg" alt="" />
	    <input type="radio" name="touxiang" value="images/2.jpg" /><img src=" images/2.jpg" alt="" />
	    <input type="radio" name="touxiang" value="images/3.jpg" /><img src=" images/3.jpg" alt="" />
	    <input type="radio" name="touxiang" value="images/4.jpg" /><img src=" images/4.jpg" alt="" />
	</p>
	<p class="thr"><input class="btn" type="submit" value="提交" /></p>
        </form>
        <div class="close"></div>
    </div>
</div>
</body>
</html>
